<template>
  <div class="login-register">
    <!-- backRouterName="Community" backRouterMode="push" -->
    <getBack></getBack>
    <video-bgc-container v-bind="videoBgcInfo">
      <template #content>
        <!-- 侧边文本描述 -->
        <div class="textDescription">
          <h1>用户对自习室进行预约，商家对自习室查看并审核</h1>
          <h3>
            The user makes an appointment for the study room, and the merchant checks and audits the
            study room
          </h3>
          <ul>
            <li>
              <i class="iconfont icon-dui"></i>
              <p>简便的在线预约流程</p>
            </li>
            <li>
              <i class="iconfont icon-dui"></i>
              <p>完善的系统功能模块</p>
            </li>
            <li>
              <i class="iconfont icon-dui"></i>
              <p>高效的在线搜索功能</p>
            </li>
            <li>
              <i class="iconfont icon-dui"></i>
              <p>优雅美观的系统页面</p>
            </li>
          </ul>
        </div>

        <!-- 登录注册区域 -->
        <div class="content">
          <component :is="showPane" @handleSwitchPage="switchPage" />
        </div>
      </template>
    </video-bgc-container>
  </div>
</template>

<script setup lang="ts">
import type { IVideoBgcContainer } from "@/components/video-bgc-container/type"
import videoBgcContainer from "@/components/video-bgc-container/video-bgc-container.vue"
import paneLogin from "./c-cpns/pane-login.vue"
import paneRegister from "./c-cpns/pane-register.vue"
import getBack from "@/components/UI-cnps/getBack/getBack.vue"
import { onMounted, onUnmounted, ref } from "vue"

const videoBgcInfo: IVideoBgcContainer = {
  videoContainerHeight: 1,
  videoLink: "/video/home.mp4"
}

// 返回页面的配置
// import type { IGetBackInfo } from "@/components/UI-cnps/getBack/type"
// const getBackInfo: IGetBackInfo = {}

// 登录注册页面显示与隐藏
const showPane = ref<typeof paneLogin | typeof paneRegister>(paneLogin)

// 登录注册页面的切换
function switchPage(pane) {
  if (pane == "paneLogin") {
    showPane.value = paneRegister
  } else {
    showPane.value = paneLogin
  }
}

onMounted(() => {
  // 页面挂载时，禁用滚动条
  document.documentElement.style.overflow = "hidden"
})

onUnmounted(() => {
  // 页面销毁前，恢复滚动条
  document.documentElement.style.overflow = ""
})
</script>

<style lang="less" scoped>
.login-register {
  .content {
    width: 560px;
    height: 680px;
    position: absolute;
    top: 2%;
    right: 8%;
    background-color: #fff;
    z-index: 100;
    border-radius: 8px;
    overflow: hidden;
    // /* 开启3d */
    // perspective: 1000px;
    // transform-style: preserve-3d;
  }

  .textDescription {
    position: absolute;
    top: 170px;
    left: 160px;
    width: 500px;
    z-index: 100;
    color: #fff;

    h1 {
      font-size: 35px;
      font-weight: 600;
      letter-spacing: 3.2px;
    }

    h3 {
      font-size: 16px;
      font-weight: 400;
      margin-top: 18px;
    }

    ul {
      margin-top: 38px;
      li {
        height: 30px;
        line-height: 30px;
        margin-bottom: 20px;
        i {
          float: left;
          font-size: 24px;
          margin-right: 4px;
        }
        p {
          font-size: 18px;
          letter-spacing: 1.25px;
        }
      }
    }
  }
}
</style>
